<template>
  <border
    class="park-parking-details"
    :moduleType="borderConfig.moduleType"
    :icon="borderConfig.icon"
    :titleText="borderConfig.titleText"
    :organType="organType"
    :goPageUrl="borderConfig.goPageUrl">
    <div class="module-content" slot="module-content">
      <div class="module-content-left">
        <octagon
          v-for="(item, index) in octagonLeft"
          :key="index"
          :iconSrc="item.iconSrc"
          :octagonImg="item.octagonImg"
          :octagonName="item.octagonName"
          :octagonNumber="octagonMessageLeft[index]"
          :octagonUnit="item.octagonUnit"></octagon>
      </div>
      <div class="module-content-right">
        <octagon
          v-for="(item, index) in octagonRight"
          :key="index"
          :class="{'early-warning': item.warningType === 1, 'warning': item.warningType === 2}"
          :iconSrc="item.iconSrc"
          :octagonImg="item.octagonImg"
          :octagonName="item.octagonName"
          :octagonNumber="item.octagonNumber"
          :octagonUnit="item.octagonUnit"></octagon>
      </div>
    </div>
  </border>
</template>

<script>
import Border from './../components/Border.vue'
import Octagon from './../components/Octagon.vue'
export default {
  name: 'parkParkingDetails',
  components: {
    Border,
    Octagon
  },
  data () {
    return {
      borderConfig: {
        moduleType: '1x1',
        icon: '',
        titleText: '园区车位详情',
        goPageUrl: ''
      },
      octagonMessageLeft: [0, 0],
      octagonLeft: [
        {
          iconSrc: require('./../../assets/images/module/icon/present-car.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-2.png'),
          octagonName: '入场车辆',
          octagonNumber: '',
          octagonUnit: '辆'
        },
        {
          iconSrc: require('./../../assets/images/module/icon/parking.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-2.png'),
          octagonName: '空余车位',
          octagonNumber: '',
          octagonUnit: '辆'
        }
      ],
      // octagonMessageRight: [0, 0, 0],
      octagonRight: [
        {
          iconSrc: require('./../../assets/images/module/icon/basement.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '',
          octagonNumber: '',
          octagonUnit: '',
          warningType: 0
        },
        {
          iconSrc: require('./../../assets/images/module/icon/ground.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '',
          octagonNumber: '',
          octagonUnit: '',
          warningType: 0
        },
        {
          iconSrc: require('./../../assets/images/module/icon/dining-hall.png'),
          octagonImg: require('./../../assets/images/module/background/background-2-3.png'),
          octagonName: '',
          octagonNumber: '',
          octagonUnit: '',
          warningType: 0
        }
      ],
      refreshInterval: 0
    }
  },
  computed: {
    organId () {
      return this.$store.state.organId
    },
    isIndex () {
      return this.$store.state.isIndex
    },
    organType () {
      return this.$store.state.moduleList[31].organType
    }
  },
  methods: {
    showTips  (data) {
      this.$parent.showTips(data)
    },
    // 获取数据
    getData (type, refreshInterval, isRefresh) {
      if (type === 'init') {
        this.wisdomParkApi.carsDetail({ organId: this.organId }).then(res => {
          if (res.data.code === '0') {
            let data = res.data.data
            this.octagonMessageLeft = [data.occupyCount, data.freeCount]
            // this.octagonMessageRight = [data.area1.count, data.area2.count, data.area3.count]
            this.octagonRight[0].octagonName = data.area1.name
            this.octagonRight[0].octagonNumber = data.area1.count
            this.octagonRight[0].octagonUnit = '/' + data.area1.totalCount
            this.octagonRight[0].warningType = Number(data.area1.count) > Number(data.area1.totalCount) ? 2 : Number(data.area1.count) > (Number(data.area1.totalCount) * 0.7) ? 1 : 0
            this.octagonRight[1].octagonName = data.area2.name
            this.octagonRight[1].octagonNumber = data.area2.count
            this.octagonRight[1].octagonUnit = '/' + data.area2.totalCount
            this.octagonRight[1].warningType = Number(data.area2.count) > Number(data.area2.totalCount) ? 2 : Number(data.area2.count) > (Number(data.area2.totalCount) * 0.7) ? 1 : 0
            this.octagonRight[2].octagonName = data.area3.name
            this.octagonRight[2].octagonNumber = data.area3.count
            this.octagonRight[2].octagonUnit = '/' + data.area3.totalCount
            this.octagonRight[2].warningType = Number(data.area3.count) > Number(data.area3.totalCount) ? 2 : Number(data.area3.count) > (Number(data.area3.totalCount) * 0.7) ? 1 : 0
          } else {
            this.showTips('请求失败，点击确认继续刷新')
            this.octagonMessageLeft = [0, 0]
            // this.octagonMessageRight = [0, 0, 0]
          }
        }, res => {
          this.showTips('请求失败，点击确认继续刷新')
          this.octagonMessageLeft = [0, 0]
          // this.octagonMessageRight = [0, 0, 0]
        })
        if (refreshInterval) {
          this.refreshInterval = refreshInterval
          this.automaticRedrawing()
        }
      }
    },
    // 根据接口返回的时间间隔请求接口
    automaticRedrawing () {
      clearInterval(window.parkParkingDetailsTimer)
      if (this.refreshInterval > 0 && this.isIndex) {
        window.parkParkingDetailsTimer = setInterval(() => {
          this.getData('init', '', true)
        }, this.refreshInterval * 1000)
      }
    }
  },
  mounted () {
  },
  destroyed () {
    clearInterval(window.parkParkingDetailsTimer)
  }
}
</script>
<style lang="scss" scoped>
  .park-parking-details {
    .module-content {
      width: calc(100% - 16.88%);
      margin-left: 8.44%;
      .module-content-left, .module-content-right {
        width: 50%;
        float: left;
      }
      .module-content-left {
        .octagon {
          & /deep/ .octagon-icon-img {
            width: 56px;
          }
          & /deep/ .octagon-message{
            width: calc(100% - 56px);
          }
        }
      }
      .module-content-right {
        .octagon {
          &.early-warning {
            & /deep/ .octagon-message-number {
              .message-number {
                color: #DBDA50;
              }
            }
          }
          &.warning {
            & /deep/ .octagon-message-number {
              .message-number {
                color: #FF4D93;
              }
            }
          }
        }
        & /deep/ .octagon-message-number {
          font-size: 14px;
          color: #fff;
          .message-number {
            margin-right: 0;
            color: #00C272;
          }
        }
      }
      .octagon {
        width: 156px;
        // width: calc((100% - 10px) /2 );
        margin-top: 3px;
        /*&:nth-of-type(even) {*/
          /*float: left;*/
        /*}*/
        & /deep/ .octagon-icon-img {
          width: 34px;
          padding: 0 5px;
          display: flex;
          align-items: center;
        }
        & /deep/ .octagon-message{
          width: calc(100% - 44px);
        }
      }
    }
  }
  @media screen and (min-width: 1890px) {
    .park-parking-details {
      .module-content {
        .octagon {
          width: 186px;
          margin-top: 5px;
          &:nth-of-type(even) {
            float: right;
          }
          & /deep/ .octagon-icon-img {
            width: 42px;
            padding: 0 5px;
            display: flex;
            align-items: center;
          }
          & /deep/ .octagon-message{
            width: calc(100% - 52px);
          }
        }
        .module-content-left {
          .octagon {
            & /deep/ .octagon-icon-img {
              width: 68px;
            }
            & /deep/ .octagon-message{
              width: calc(100% - 68px);
            }
          }
        }
        .module-content-right {
          & /deep/ .octagon-message-number {
            font-size: 18px;
            color: #fff;
            .message-number {
              margin-right: 0;
            }
          }
        }
      }
    }
  }
</style>
